<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>8款炫酷HTML5 Canvas星空背景动画DEMO演示2</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
	<style type="text/css">
		.zzsc-content{
			position: relative;
			width: 500px;
			height: 500px;
			margin: 0 auto;
		}
		#holder {
	            position: absolute;
	            width: 480px;
	            height: 480px;
	            top: 0;
	            left: 0;
	        }
	       .center{
	       	text-align: center;
	       }
	</style>
</head>
<body>
	<div class="zzsc-container">
		<header class="zzsc-header">
			<h1>HTML5 Canvas星空背景特效 <span>Interactive Warp Drive Starfield Effect With jQuery</span></h1>
			<div class="zzsc-demo center">
			  <a href="index.html">DEMO1</a>
			  <a href="index2.html" class="current">DEMO2</a>
			  <a href="index3.html">DEMO3</a>
			  <a href="index4.html">DEMO4</a>
			  <a href="index5.html">DEMO5</a>
			  <a href="index6.html">DEMO6</a>
			  <a href="index7.html">DEMO7</a>
			  <a href="index8.html">DEMO8</a>
			</div>
			<div style="text-align:center;clear:both">
			<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
			<script src="/follow.js" type="text/javascript"></script>
			</div>
		</header>
		<h3 class="center">鼠标hover画布查看加速动画效果。</h3>
		<div class="zzsc-content">
			<div id='holder'></div>
		</div>
	</div>
	
	<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
	<script src='js/jquery.warpdrive.min.js'></script>
	<script>

        $( document ).ready( function() {

            //------------------------------------------------------------------------

            //Settings - params for WarpDrive
            var settings = {

                width: 480,
                height: 480,
                autoResize: false,
                autoResizeMinWidth: null,
                autoResizeMaxWidth: null,
                autoResizeMinHeight: null,
                autoResizeMaxHeight: null,
                addMouseControls: true,
                addTouchControls: true,
                hideContextMenu: true,
                starCount: 6666,
                starBgCount: 2222,
                starBgColor: { r:0, g:204, b:255 },
                starBgColorRangeMin: 20,
                starBgColorRangeMax: 80,
                starColor: { r:0, g:204, b:255 },
                starColorRangeMin: 50,
                starColorRangeMax: 100,
                starfieldBackgroundColor: { r:5, g:5, b:14 },
                starDirection: 1,
                starSpeed: 20,
                starSpeedMax: 200,
                starSpeedAnimationDuration: 2,
                starFov: 300,
                starFovMin: 200,
                starFovAnimationDuration: 2,
                starRotationPermission: true,
                starRotationDirection: 1,
                starRotationSpeed: 0.0,
                starRotationSpeedMax: 1.0,
                starRotationAnimationDuration: 2,
                starWarpLineLength: 2.0,
                starWarpTunnelDiameter: 100,
                starFollowMouseSensitivity: 0.025,
                starFollowMouseXAxis: true,
                starFollowMouseYAxis: true

            };

            //------------------------------------------------------------------------

            //standalone

            //init
            
            //var warpdrive = new WarpDrive( document.getElementById( 'holder' ) );
            var warpdrive = new WarpDrive( document.getElementById( 'holder' ), settings );

            //------------------------------------------------------------------------

            //jQuery

            //init
            
            //$( '#holder' ).warpDrive();
            //$( '#holder' ).warpDrive( settings );
            
            //------------------------------------------------------------------------

		} );
        
    </script>
</body>
</html>